<template>
    <el-scrollbar>
        <div class="headerTags">
            <el-tag type="primary" @click.stop="clickHeaderTags('/dashboard')" :effect="isHome ? 'dark' : 'light'" class="headerTags-home">{{ $t("首页") }}</el-tag>
            <el-tag
                type="primary"
                :effect="item.path == route.path ? 'dark' : 'light'"
                class="headerTags-home"
                closable
                v-for="(item, index) in headerTags"
                :key="index"
                @close="removeHeaderTags(index)"
                @click.stop="clickHeaderTags(item)"
                >{{ $t(item.meta.title) }}</el-tag
            >
        </div>
    </el-scrollbar>
</template>
<script lang="ts" setup>
import { computed, ref, watch, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
// 头部标签列表
const headerTags: any = ref([]);
// 是否主页
const isHome = ref(false);
// 面包屑
const breadcrumb = computed(() => {
    nextTick(() => {
        selectHeaderTags();
    });
    return route.matched;
});
// 监听路由变化
watch(breadcrumb, (val: any) => {
    nextTick(() => {
        selectHeaderTags();
    });
});
// 删除头部标签
const removeHeaderTags = (index: number) => {
    headerTags.value.splice(index, 1);
};
// 选择头部标签
const selectHeaderTags = () => {
    const path = route.path;
    if (path === "/dashboard") {
        isHome.value = true;
    } else {
        isHome.value = false;
        const currentRoute = headerTags.value.find((v: any) => v.path === path);
        if (!currentRoute) {
            const list: any = route.matched[route.matched.length - 1];
            headerTags.value.push(list);
        }
    }
};
// 点击头部标签
const clickHeaderTags = (item: any) => {
    if (typeof item === "string") {
        router.push(item);
    } else {
        router.push(item.path);
    }
};
</script>
